<template>
  <div class="sentiment-analysis-container">
    <!-- 顶部筛选区域 -->
    <div class="filter-section">
      <el-card shadow="hover" class="filter-card">
        <el-form :inline="true" :model="filterForm">
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="情感倾向">
            <el-select style="width: 200px" v-model="filterForm.sentiment" placeholder="全部">
              <el-option label="全部" value="all" />
              <el-option label="正面" value="positive" />
              <el-option label="中性" value="neutral" />
              <el-option label="负面" value="negative" />
            </el-select>
          </el-form-item>
          <el-form-item label="关键词">
            <el-input v-model="filterForm.keyword" placeholder="输入关键词" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleFilter">分析</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 数据概览卡片 -->
    <div class="overview-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card positive-card">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon size="36"><SuccessFilled /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-title">正面评价</div>
                <div class="stat-value">62,345</div>
                <div class="stat-change">
                  <el-icon color="#67C23A"><Top /></el-icon>
                  <span>8.5%</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card neutral-card">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon size="36"><InfoFilled /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-title">中性评价</div>
                <div class="stat-value">23,876</div>
                <div class="stat-change">
                  <el-icon color="#909399"><Right /></el-icon>
                  <span>1.2%</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card negative-card">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon size="36"><WarningFilled /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-title">负面评价</div>
                <div class="stat-value">14,905</div>
                <div class="stat-change">
                  <el-icon color="#F56C6C"><Bottom /></el-icon>
                  <span>3.8%</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card total-card">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon size="36"><DataAnalysis /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-title">总评论数</div>
                <div class="stat-value">101,126</div>
                <div class="stat-change">
                  <el-icon color="#409EFF"><Top /></el-icon>
                  <span>12.3%</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 情感分析模块 -->
    <div class="analysis-section">
      <el-divider content-position="left">
        <h3>情感分析</h3>
      </el-divider>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover" class="chart-card">
            <div id="sentimentPieChart" style="height: 400px"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="chart-card">
            <div id="sentimentTrendChart" style="height: 400px"></div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="mt-20">
        <el-col :span="12">
          <el-card shadow="hover" class="chart-card">
            <div id="sentimentHeatMap" style="height: 400px"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="chart-card">
            <div id="sentimentScoreChart" style="height: 400px"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 关键词与主题挖掘模块 -->
    <div class="topic-section">
      <el-divider content-position="left">
        <h3>关键词与主题挖掘</h3>
      </el-divider>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover" class="chart-card">
            <div id="wordCloudChart" style="height: 400px"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="chart-card">
            <div id="topicRelationChart" style="height: 400px"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import "echarts-wordcloud";

// 筛选表单
const filterForm = ref({
  dateRange: ["", ""],
  sentiment: "all",
  keyword: "",
});

// 处理筛选
const handleFilter = () => {
  initCharts();
};

// 重置筛选
const resetFilter = () => {
  filterForm.value = {
    dateRange: ["", ""],
    sentiment: "all",
    keyword: "",
  };
  initCharts();
};

// 初始化所有图表
const initCharts = () => {
  initSentimentPieChart();
  initSentimentTrendChart();
  initSentimentHeatMap();
  initSentimentScoreChart();
  initWordCloudChart();
  initTopicRelationChart();
};

// 1. 情感分布饼图
const initSentimentPieChart = () => {
  const chart = echarts.init(document.getElementById("sentimentPieChart"));

  const option = {
    title: {
      text: "情感分布比例",
      left: "center",
      textStyle: {
        color: "#333",
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
      orient: "vertical",
      right: 10,
      top: "center",
      data: ["正面", "中性", "负面"],
    },
    series: [
      {
        name: "情感分布",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "18",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 62345, name: "正面", itemStyle: { color: "#67C23A" } },
          { value: 23876, name: "中性", itemStyle: { color: "#909399" } },
          { value: 14905, name: "负面", itemStyle: { color: "#F56C6C" } },
        ],
      },
    ],
  };

  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};

// 2. 情感趋势图
const initSentimentTrendChart = () => {
  const chart = echarts.init(document.getElementById("sentimentTrendChart"));

  const option = {
    title: {
      text: "情感趋势变化",
      left: "center",
      textStyle: {
        color: "#333",
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["正面", "中性", "负面"],
      bottom: 10,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "15%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
      axisLabel: {
        rotate: 45,
      },
    },
    yAxis: {
      type: "value",
      name: "评论数量",
    },
    series: [
      {
        name: "正面",
        type: "line",
        stack: "总量",
        smooth: true,
        data: [8500, 9200, 10100, 11300, 12500, 13400, 14500],
        itemStyle: {
          color: "#67C23A",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(103, 194, 58, 0.5)" },
            { offset: 1, color: "rgba(103, 194, 58, 0.1)" },
          ]),
        },
      },
      {
        name: "中性",
        type: "line",
        stack: "总量",
        smooth: true,
        data: [3200, 3500, 3800, 4200, 4500, 4800, 5200],
        itemStyle: {
          color: "#909399",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(144, 147, 153, 0.5)" },
            { offset: 1, color: "rgba(144, 147, 153, 0.1)" },
          ]),
        },
      },
      {
        name: "负面",
        type: "line",
        stack: "总量",
        smooth: true,
        data: [1800, 2000, 2200, 2400, 2600, 2800, 3000],
        itemStyle: {
          color: "#F56C6C",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(245, 108, 108, 0.5)" },
            { offset: 1, color: "rgba(245, 108, 108, 0.1)" },
          ]),
        },
      },
    ],
  };

  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};

// 3. 情感热力图
const initSentimentHeatMap = () => {
  const chart = echarts.init(document.getElementById("sentimentHeatMap"));

  const hours = [
    "12a",
    "1a",
    "2a",
    "3a",
    "4a",
    "5a",
    "6a",
    "7a",
    "8a",
    "9a",
    "10a",
    "11a",
    "12p",
    "1p",
    "2p",
    "3p",
    "4p",
    "5p",
    "6p",
    "7p",
    "8p",
    "9p",
    "10p",
    "11p",
  ];
  const days = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];

  const data = [];
  for (let i = 0; i < 7; i++) {
    for (let j = 0; j < 24; j++) {
      data.push([j, i, Math.round(Math.random() * 500)]);
    }
  }

  const option = {
    title: {
      text: "情感热度分布",
      left: "center",
      textStyle: {
        color: "#333",
        fontSize: 16,
      },
    },
    tooltip: {
      position: "top",
      formatter: function (params: any) {
        return `${days[params.value[1]]} ${hours[params.value[0]]}: ${params.value[2]}条`;
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: hours,
      splitArea: {
        show: true,
      },
    },
    yAxis: {
      type: "category",
      data: days,
      splitArea: {
        show: true,
      },
    },
    visualMap: {
      min: 0,
      max: 500,
      calculable: true,
      orient: "horizontal",
      left: "center",
      bottom: "5%",
      inRange: {
        color: ["#e0f3f8", "#abd9e9", "#74add1", "#4575b4", "#313695"],
      },
    },
    series: [
      {
        name: "评论热度",
        type: "heatmap",
        data: data,
        label: {
          show: false,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};

// 4. 情感分数分布图
const initSentimentScoreChart = () => {
  const chart = echarts.init(document.getElementById("sentimentScoreChart"));

  const option = {
    title: {
      text: "情感分数分布",
      left: "center",
      textStyle: {
        color: "#333",
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      name: "情感分数",
      min: -1,
      max: 1,
      axisLabel: {
        formatter: "{value}",
      },
    },
    yAxis: {
      type: "value",
      name: "评论数量",
    },
    series: [
      {
        name: "评论分布",
        type: "bar",
        data: [
          [-0.9, 500],
          [-0.8, 1000],
          [-0.7, 1500],
          [-0.6, 2000],
          [-0.5, 2500],
          [-0.4, 3000],
          [-0.3, 3500],
          [-0.2, 4000],
          [-0.1, 4500],
          [0, 5000],
          [0.1, 4500],
          [0.2, 4000],
          [0.3, 3500],
          [0.4, 3000],
          [0.5, 2500],
          [0.6, 2000],
          [0.7, 1500],
          [0.8, 1000],
          [0.9, 500],
        ],
        itemStyle: {
          color: function (params: any) {
            const value = params.data[0];
            if (value < -0.3) return "#F56C6C";
            if (value < 0.3) return "#909399";
            return "#67C23A";
          },
        },
      },
    ],
  };

  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};

// 5. 关键词词云
const initWordCloudChart = () => {
  const chart = echarts.init(document.getElementById("wordCloudChart"));

  const words = [
    { name: "信号覆盖", value: 18000 },
    { name: "网络速度", value: 17500 },
    { name: "酱香口感", value: 17000 },
    { name: "5G体验", value: 16500 },
    { name: "基酒品质", value: 16000 },
    { name: "品牌溢价", value: 15500 },
    { name: "基站数量", value: 14800 },
    { name: "资费套餐", value: 14500 },
    { name: "老酒陈香", value: 14200 },
    { name: "连接稳定性", value: 14000 },
    { name: "渠道管控", value: 13800 },
    { name: "勾调工艺", value: 13500 },
    { name: "客服响应", value: 13200 },
    { name: "空杯留香", value: 13000 },
    { name: "国际漫游", value: 12800 },
    { name: "价格体系", value: 12500 },
    { name: "VoLTE质量", value: 12200 },
    { name: "收藏价值", value: 12000 },
    { name: "切换流畅度", value: 11800 },
    { name: "产区特色", value: 11600 },
    { name: "投诉处理", value: 11500 },
    { name: "信号盲区", value: 11400 },
    { name: "酒体醇厚", value: 11300 },
    { name: "网络延迟", value: 11200 },
    { name: "窖香浓郁", value: 11100 },
    { name: "高峰时段", value: 11000 },
    { name: "酒花持久", value: 10900 },
    { name: "室内信号", value: 10800 },
    { name: "尾净悠长", value: 10700 },
    { name: "2G退网", value: 10600 },
    { name: "粮香突出", value: 10500 },
    { name: "携号转网", value: 10450 },
    { name: "曲香协调", value: 10400 },
    { name: "宽带捆绑", value: 10350 },
    { name: "挂杯明显", value: 10300 },
    { name: "信号干扰", value: 10250 },
    { name: "酒线绵长", value: 10200 },
    { name: "基站辐射", value: 10150 },
    { name: "陈味舒适", value: 10100 },
    { name: "网络优化", value: 10480 },
    { name: "大曲坤沙", value: 10460 },
    { name: "流量资费", value: 10440 },
    { name: "12987工艺", value: 10420 },
    { name: "信号强度", value: 10400 },
    { name: "轮次酒比例", value: 10380 },
    { name: "网速测试", value: 10360 },
    { name: "老熟程度", value: 10340 },
    { name: "家庭套餐", value: 10320 },
    { name: "勾兑技术", value: 10300 },
    { name: "网络覆盖", value: 10280 },
    { name: "酒醅发酵", value: 10260 },
    { name: "信号衰减", value: 10240 },
    { name: "贮存年限", value: 10220 },
    { name: "volte通话", value: 10200 },
    { name: "高温制曲", value: 10180 },
    { name: "网络切片", value: 10160 },
    { name: "低温接酒", value: 10140 },
  ];
  const option = {
    title: {
      text: "关键词词云",
      left: "center",
      textStyle: {
        color: "#333",
        fontSize: 16,
      },
    },
    tooltip: {
      show: true,
      formatter: function (params: any) {
        return `${params.name}: ${params.value}次提及`;
      },
    },
    series: [
      {
        type: "wordCloud",
        shape: "circle",
        left: "center",
        top: "center",
        width: "90%",
        height: "90%",
        right: null,
        bottom: null,
        sizeRange: [12, 40],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        textStyle: {
          fontFamily: "sans-serif",
          fontWeight: "bold",
          color: function () {
            return (
              "rgb(" +
              [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
              ].join(",") +
              ")"
            );
          },
        },
        emphasis: {
          focus: "self",
          textStyle: {
            shadowBlur: 10,
            shadowColor: "#333",
          },
        },
        data: words,
      },
    ],
  };
  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};

// 6. 主题关系图
const initTopicRelationChart = () => {
  const chart = echarts.init(document.getElementById("topicRelationChart"));
  const option = {
    title: {
      text: "主题关系网络",
      left: "center",
      textStyle: {
        color: "#333",
        fontSize: 16,
      },
    },
    tooltip: {},
    legend: {
      data: ["正面", "中性", "负面"],
      bottom: 10,
    },
    series: [
      {
        name: "主题关系",
        type: "graph",
        layout: "force",
        data: [
          { name: "信号覆盖", value: 18000, category: 0, symbolSize: 40 },
          { name: "网络速度", value: 17500, category: 0, symbolSize: 38 },
          { name: "5G体验", value: 16500, category: 0, symbolSize: 36 },
          { name: "连接稳定性", value: 14000, category: 0, symbolSize: 34 },
          { name: "基站数量", value: 14800, category: 1, symbolSize: 32 },
          { name: "资费套餐", value: 14500, category: 1, symbolSize: 30 },
          { name: "国际漫游", value: 12800, category: 1, symbolSize: 28 },
          { name: "VoLTE质量", value: 12200, category: 2, symbolSize: 26 },
          { name: "信号盲区", value: 11400, category: 2, symbolSize: 24 },
          { name: "网络延迟", value: 11200, category: 2, symbolSize: 22 },
          { name: "客服响应", value: 13200, category: 2, symbolSize: 20 },
          { name: "投诉处理", value: 11500, category: 2, symbolSize: 18 },
          { name: "酱香口感", value: 17000, category: 0, symbolSize: 35 },
          { name: "基酒品质", value: 16000, category: 0, symbolSize: 33 },
          { name: "老酒陈香", value: 14200, category: 0, symbolSize: 31 },
          { name: "勾调工艺", value: 13500, category: 0, symbolSize: 29 },
          { name: "空杯留香", value: 13000, category: 0, symbolSize: 27 },
          { name: "价格体系", value: 12500, category: 1, symbolSize: 25 },
          { name: "酒体醇厚", value: 11300, category: 0, symbolSize: 23 },
          { name: "窖香浓郁", value: 11100, category: 0, symbolSize: 21 },
        ],
        links: [
          { source: "信号覆盖", target: "网络速度" },
          { source: "信号覆盖", target: "5G体验" },
          { source: "网络速度", target: "连接稳定性" },
          { source: "5G体验", target: "基站数量" },
          { source: "基站数量", target: "信号盲区" },
          { source: "连接稳定性", target: "网络延迟" },
          { source: "资费套餐", target: "国际漫游" },
          { source: "资费套餐", target: "VoLTE质量" },
          { source: "国际漫游", target: "客服响应" },
          { source: "客服响应", target: "投诉处理" },
          { source: "酱香口感", target: "基酒品质" },
          { source: "酱香口感", target: "老酒陈香" },
          { source: "基酒品质", target: "勾调工艺" },
          { source: "老酒陈香", target: "空杯留香" },
          { source: "勾调工艺", target: "酒体醇厚" },
          { source: "空杯留香", target: "窖香浓郁" },
          { source: "价格体系", target: "资费套餐" },
        ],
        categories: [
          { name: "正面" }, // 0 - 正面评价相关主题
          { name: "中性" }, // 1 - 中性评价相关主题
          { name: "负面" }, // 2 - 负面评价相关主题
        ],
        roam: true,
        label: {
          show: true,
          position: "right",
          formatter: "{b}",
        },
        force: {
          repulsion: 150,
          edgeLength: [50, 150],
        },
        emphasis: {
          focus: "adjacency",
          label: {
            show: true,
          },
        },
        lineStyle: {
          width: 1.5,
          curveness: 0.2,
          color: "source",
        },
        edgeSymbol: ["none", "arrow"],
        edgeSymbolSize: [4, 8],
      },
    ],
  };

  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};

onMounted(() => {
  initCharts();
});
</script>

<style lang="scss" scoped>
.sentiment-analysis-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.filter-section {
  margin-bottom: 20px;

  .filter-card {
    background-color: #fff;
    border-radius: 8px;

    :deep(.el-card__body) {
      padding: 20px;
    }
  }
}

.overview-section {
  margin-bottom: 20px;

  .stat-card {
    border-radius: 8px;
    border: none;

    &.positive-card {
      border-left: 4px solid #67c23a;
    }

    &.neutral-card {
      border-left: 4px solid #909399;
    }

    &.negative-card {
      border-left: 4px solid #f56c6c;
    }

    &.total-card {
      border-left: 4px solid #409eff;
    }

    .stat-content {
      display: flex;
      align-items: center;

      .stat-icon {
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: rgba(64, 158, 255, 0.1);

        .el-icon {
          color: #409eff;
        }
      }

      .stat-info {
        flex: 1;

        .stat-title {
          font-size: 14px;
          color: #909399;
          margin-bottom: 5px;
        }

        .stat-value {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 5px;
        }

        .stat-change {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #909399;

          .el-icon {
            margin-right: 3px;
          }
        }
      }
    }
  }
}

.analysis-section,
.topic-section {
  margin-bottom: 30px;

  .chart-card {
    border-radius: 8px;
    border: none;

    :deep(.el-card__body) {
      padding: 20px;
    }
  }
}

.mt-20 {
  margin-top: 20px;
}

h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}
</style>
